<<!include:header>>
    <style>
        .selectedItem {
            background-color: darkgoldenrod;
        }
    </style>

    <!-- ======= Hero Section3 ======= -->

    <section class="hero-section inner-page">
        <div class="container" style="margin-top:100px;color:#fff">
            <div class="row   " id="collegeRowDiv">
                <div
                    style="margin:20px;color:#fff; filter:opacity(20); border-style: solid;   width: 100%;  border-radius: 4px; border: azure; ">
                    <div class="group">
                        <div class="head">学院:</div>
                        <hr color="#f1f1f1" style=" margin-top: 10px; margin-bottom: 10px; ">
                        <div class="item well" id="collegeDiv" style="margin-left:20px;line-height: 40px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row   " id="courseKindRowDiv">
                <div style="margin:20px;color:#fff; width: 100%;">
                    <div class="group">
                        <div class="head">分类:</div>
                        <hr color="#f1f1f1" style=" margin-top: 10px; margin-bottom: 10px; ">
                        <div class="item well " id="courseKindDiv" style="margin-left:20px;line-height: 40px;">

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </section><!-- End Hero -->

    <main id="main">
        <!-- ======= Testimonials Section ======= -->
        <section class="  border-bottom">
            <div class="row " id="courseDiv" style="min-height: 500px;padding:50px; ;">

            </div>
        </section><!-- End Testimonials Section -->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script>
            var allCollege;
            var allCourseKind;
            var currentPageCourse = [];
            var totalPage;
            var currentCollegeID = 0;
            var currentKindID = 0;
            axios.get('/api/course/getCollegeAndKindAndLimitCourse?limit=20')
                .then(function (response) {
                    var res = response.data;
                    if (res.code != 200) {

                        alert(res.title)
                        return;
                    }
                    allCourseKind = res.data;
                    allCollege = res.title;
                    currentPageCourse = res.attach[0]
                    totalPage = res.attach[1]
                    var collegeStr = "";
                    collegeStr = collegeStr + "<a id='college0' class='selectedItem' style='margin-left:25px;color:#ffffff;cursor:pointer;  ' onclick='onSelectCollege(0)'>全部</a>";


                    for (var i = 0; i < allCollege.length; i++) {
                        var item = allCollege[i];
                        collegeStr = collegeStr + "<a id='college" + item.Id + "' style='margin-left:25px;color:#ffffff;cursor:pointer;' onclick='onSelectCollege(" + item.Id + ")'>" + item.Label + "</a>";
                    }

                    document.getElementById("collegeRowDiv").setAttribute("style", "min-height:100px;height:" + (100 + allCollege.length * 5) + "px");

                    document.getElementById("collegeDiv").innerHTML = (collegeStr)

                    onSelectCollege(0)
                    displayCourseList(res.attach[0])
                })
                .catch(function (error) {
                    console.log(error);
                });
            function onSelectCollege(collegeid) {

                document.getElementById("college" + currentCollegeID).setAttribute("class", "");
                document.getElementById("college" + collegeid).setAttribute("class", "selectedItem");

                currentCollegeID = collegeid;
                currentKindID = 0;
                var currentKindList = [];
                if (currentCollegeID == 0) {
                    currentKindList = allCourseKind;
                } else {
                    for (var i = 0; i < allCourseKind.length; i++) {
                        var item = allCourseKind[i];
                        if (item.TCollegeID == currentCollegeID) {
                            currentKindList.push(item);
                        }
                    }
                }
                //--------- 课程类别 
                var courseKindStr = "";
                courseKindStr = courseKindStr + "<a id='kind0'  class='selectedItem'  style='margin-left:25px;color:#ffffff;cursor:pointer;background-color:#darkgoldenrod;' onclick='onSelectCourseKind(0)'>全部</a>";

                for (var i = 0; i < currentKindList.length; i++) {
                    var item = currentKindList[i];
                    courseKindStr = courseKindStr + "<a id='kind" + item.Id + "' style='margin-left:25px;color:#ffffff;cursor:pointer;' onclick='onSelectCourseKind(" + item.Id + ")'>" + item.Label + "</a>";
                }
                document.getElementById("courseKindDiv").innerHTML = (courseKindStr)
                document.getElementById("courseKindRowDiv").setAttribute("style", "min-height:100px;height:" + (100 + currentKindList.length * 5) + "px");
            }

            function onSelectCourseKind(coursekindID) {

                document.getElementById("kind" + currentKindID).setAttribute("class", "");
                document.getElementById("kind" + coursekindID).setAttribute("class", "selectedItem");
                currentKindID = coursekindID;

                var totalPage;
                axios.get('/api/course/getCourseOfKind?offset=0&limit=20&kindid=' + coursekindID + "&collegeID=" + currentCollegeID)
                    .then(function (response) {
                        var res = response.data;
                        if (res.code != 200) {

                            alert(res.title)
                            return;
                        }
                        if (!res.data) {
                            document.getElementById("courseDiv").innerHTML = `<div style="margin:10px;
    width: 100%;
    text-align: center;
"> 这里没有课程 </div>`;
                            return;
                        }
                        displayCourseList(res.data)

                    })

            }
            function displayCourseList(courselist) {
                //--------- 课程 
                var courseStr = "";
                var courseLength = courselist.length;
                for (var i = 0; i < courseLength; i++) {
                    var item = courselist[i];

                    courseStr = courseStr +
                        ` <div class="col-lg-3 "  style="padding:15px">
        <div class="pricing h-100 text-center">
            <span>&nbsp;</span>
            <h3> `+ item.Label + `</h3>
            <ul class="list-unstyled">
                 
                <li>`+ item.Description + `</li>
            </ul>
            <div class="price-cta">
                <strong class="price">`+ item.Price + `</strong>
                <p><a href="courseDetail?id=`+ item.Id + `"  class="btn btn-white">查看详情</a></p>
            </div>
        </div>
    </div>`;
                }
                document.getElementById("courseDiv").innerHTML = (courseStr)
            }

        </script>
    </main><!-- End #main -->
    <<!include:footer>>